<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #fafafa; 
        }
        .screen_box {
            width: 100%;
            background-color: #fafafa;
            padding-bottom: 50px;
            transform: translate3d(0, -100%, 0);
            -webkit-transform: translate3d(0, -100%, 0);
            transition: all 0.3s;
            -webkit-transition: all 0.3s;
        }
        .screen_box .screen_title {
            height: 40px;
            line-height: 50px;
            padding-left: 20px;
            font-size: 14px;
            color: #636363;
        }
        .screen_box .screen_div {
            border-top: 1px solid #ededed;
        }
        .screen_box .screen_div ul {
            overflow: hidden;
        }
        .screen_box .screen_div ul li {
            width: 33.333333%;
            height: 43px;
            line-height: 43px;
            float: left;
            text-align: center;
            background-color: #fff;
            font-size: 13px;
            color: #333;
            border-right: 1px solid #ededed;
            box-sizing: border-box;
            border-bottom: 1px solid #ededed;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;
        }
        .screen_box .screen_div ul li span {
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            display: block;
            font-size: 11px;
            border-radius: 3px;
            color: #fff;
            margin-right: 6px;
        }
        .screen_box .screen_div ul li input {
        	display: none;
        }
        .screen_box .screen_div ul li img {
        	width: 11px;
        	margin-right: 6px;
        	display: none;
        }
        .screen_box .screen_div ul li.active {
        	background-color: #eef7ff;
        	color: #3294f7;
        }
        .screen_box .screen_div ul li:nth-child(1) span {
            background-color: #FF0000;
        }
        .screen_box .screen_div ul li:nth-child(2) span {
            background-color: #0099FF;
        }
        .btn_box {
            width: 100%;
            overflow: hidden;
            position: fixed;
            bottom: 0;
            z-index: 101;
        }
        .btn_box .btn {
            width: 50%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
            color: #cacaca;
            background-color: #fff;
            font-size: 15px;
        }
        .btn_box .btn.active {
            background-color: #e62442;
            color: #fff;
        }
        .btn_box .btn.black{
            font-weight: 700;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="screen_box">
        <div class="screen_title">优惠活动</div>
        <div class="screen_div activity_box">
            <ul>
                <li id="coupon1" tapmode onclick="fnActivity(this,1);">
                	<input type="radio" name="activity">
                	<img class="check_icon" src="../image/check_icon.png">
                	<span class="activity_span">减</span>
                	满减活动
                </li>
                <li id="ticket1" tapmode onclick="fnActivity2(this,1);">
                	<input type="radio" name="activity2">
                	<img class="check_icon" src="../image/check_icon.png">
                	<span class="activity_span">券</span>
                	发放优惠券
                </li>
            </ul>
        </div>
        <div class="screen_title">人均消费</div>
        <div class="screen_div consume_box">
            <ul>
                <li id="p0-20" tapmode onclick="fnConsume(this,'0-20');">
                	<input type="radio" name="consume">
                	<img class="check_icon" src="../image/check_icon.png">
                	RM20以内
                </li>
                <li id="p20-50" tapmode onclick="fnConsume(this,'20-50');">
                	<input type="radio" name="consume">
                	<img class="check_icon" src="../image/check_icon.png">
                	RM20-50
                </li>
                <li id="p50-100" tapmode onclick="fnConsume(this,'50-100');">
                	<input type="radio" name="consume">
                	<img class="check_icon" src="../image/check_icon.png">
                	RM50-100
                </li>
                <li id="p100-1000000" tapmode onclick="fnConsume(this,'100-1000000');">
                    <input type="radio" name="consume">
                    <img class="check_icon" src="../image/check_icon.png">
                    RM100以上
                </li>
            </ul>
        </div>
        <div class="screen_title">商家类型</div>
        <div class="screen_div shop_type_box">
            <ul>
                <li id="type1" tapmode onclick="fnShopType(this,1);">
                    <input type="radio" name="shop_type">
                    <img class="check_icon" src="../image/check_icon.png">
                    餐厅
                </li>
                <li id="type2" tapmode onclick="fnShopType(this,2);">
                    <input type="radio" name="shop_type">
                    <img class="check_icon" src="../image/check_icon.png">
                    档口
                </li>
            </ul>
        </div>
    </div>
    <div class="btn_box">
        <div class="btn clear_choose" tapmode onclick="fnEmpty();">清除筛选</div>
        <div class="btn active" onclick="fnSubmit();" tapmode>完成</div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript">
    apiready = function(){
        coupon = api.pageParam.coupon||'';
        price = api.pageParam.price||'';
        shop_type = api.pageParam.shop_type||'';
        ticket = api.pageParam.ticket||'';
        //如果有状态把状态塞回去
        if(coupon) {
            fnActivity('#coupon'+coupon,coupon);
        }
        if(ticket) {
            fnActivity2('#ticket'+ticket,ticket);
        }
        if(price) {
            fnConsume('#p'+price,price);
        }
        if(shop_type){
            fnShopType('#type'+shop_type,shop_type);
        }
	    $('.screen_box').css({
	    	'transform': 'translate3d(0, 0, 0)',
	    	'-webkit-transform': 'translate3d(0, 0, 0)'
	    });
    };

    // 如果有选中条件，则‘清楚筛选’变黑色 - tim
    function checkClearBlack () {
        if(coupon != '' || price != '' || shop_type != '' || ticket != ''){
            $(".clear_choose").addClass('black');
        }else{
            $(".clear_choose").removeClass('black');
        }
    };

	// 优惠活动
    function fnActivity(this_,cou) {
    	if ($(this_).children('input[name=activity]').is(':checked')) {
	    	$(this_).children('input[name=activity]').prop('checked', false);
	    	$(this_).children('.check_icon').css('display', 'none');
	    	$(this_).children('.activity_span').css('display', 'block');
	    	$(this_).removeClass('active');
            coupon = '';
    	} else {
	    	$(this_).children('input[name=activity]').prop('checked', true);
	    	$(this_).children('.activity_span').css('display', 'none');
	    	$(this_).children('.check_icon').css('display', 'block');
	    	$(this_).addClass('active');
            coupon = cou;
        }
        checkClearBlack();
    }

        // 优惠活动
    function fnActivity2(this_,cou) {
        if ($(this_).children('input[name=activity2]').is(':checked')) {
            $(this_).children('input[name=activity2]').prop('checked', false);
            $(this_).children('.check_icon').css('display', 'none');
            $(this_).children('.activity_span').css('display', 'block');
            $(this_).removeClass('active');
            ticket = '';
        } else {
            $(this_).children('input[name=activity2]').prop('checked', true);
            $(this_).children('.activity_span').css('display', 'none');
            $(this_).children('.check_icon').css('display', 'block');
            $(this_).addClass('active');
            ticket = cou;
        }
        checkClearBlack();
    }

    // 人均消费
    function fnConsume(this_,consume) {
    	if ($(this_).children('input[name=consume]').is(':checked')) {
	    	$(this_).children('input[name=consume]').prop('checked', false);
	    	$(this_).children('.check_icon').css('display', 'none');
	    	$(this_).removeClass('active');
            price='';
    	} else {
    		$('.consume_box li').removeClass('active');
    		$('.consume_box .check_icon').css('display', 'none');
	    	$(this_).children('input[name=consume]').prop('checked', true);
	    	$(this_).children('.check_icon').css('display', 'block');
	    	$(this_).addClass('active');
            price = consume;
        }
        checkClearBlack();
    }

     // 商家类型
    function fnShopType(this_,type) {
        if ($(this_).children('input[name=shop_type]').is(':checked')) {
            $(this_).children('input[name=shop_type]').prop('checked', false);
            $(this_).children('.check_icon').css('display', 'none');
            $(this_).removeClass('active');
            shop_type = '';
        } else {
            $('.shop_type_box li').removeClass('active');
            $('.shop_type_box .check_icon').css('display', 'none');
            $(this_).children('input[name=shop_type]').prop('checked', true);
            $(this_).children('.check_icon').css('display', 'block');
            $(this_).addClass('active');
            shop_type = type;
        }
        checkClearBlack();
    }

    // 清空
    function fnEmpty() {
        $('input[name=activity]').prop('checked', false);
        $('input[name=activity2]').prop('checked', false);
        $('.activity_box .check_icon').css('display', 'none');
        $('.activity_box li').removeClass('active');
        $('.activity_span').css('display', 'block');

        $('input[name=consume]').prop('checked', false);
        $('.consume_box .check_icon').css('display', 'none');
        $('.consume_box li').removeClass('active');

        $('input[name=shop_type]').prop('checked', false);
        $('.shop_type_box .check_icon').css('display', 'none');
        $('.shop_type_box li').removeClass('active');
        coupon = '';
        price = '';
        shop_type = '';
        ticket = '';
        checkClearBlack();
    }

    function fnSubmit() {
        api.sendEvent({
            name: 'choseAttrEvent',
            extra: {
                coupon: coupon,
                ticket:ticket,
                price: price,
                shop_type : shop_type
            }
        });

        fnMask();
    }

    function fnMask() {
        api.sendEvent({
            name: 'closeMaskEvent',
            extra: {
            }
        });
    }
</script>
</html>